<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Setting, Management, Document } from '@element-plus/icons-vue'
import WorkflowDesigner from './components/WorkflowDesigner.vue'
import WorkflowManager from './components/WorkflowManager.vue'
import WorkflowApiService from './services/workflowApi'

// 响应式数据
const showDesigner = ref(false)
const showManager = ref(false)

// 对话框关闭处理
const handleDesignerClose = () => {
  showDesigner.value = false
}

const handleManagerClose = () => {
  showManager.value = false
}

// API测试方法
const testApi = async () => {
  try {
    const response = await WorkflowApiService.getUsers()
    if (response.success && response.data) {
      ElMessage.success(`API测试成功，获取到 ${response.data.length} 个用户`)
    } else {
      ElMessage.warning('API测试失败，可能是后端服务未启动')
    }
  } catch (error) {
    ElMessage.error('API测试失败，请检查后端服务')
    console.error('API测试错误:', error)
  }
}
</script>

<template>
  <div class="app-root">
    <el-container class="app-container">
      <el-header class="app-header">
        <div class="header-content">
          <h1 class="app-title">工作流管理系统</h1>
          <div class="header-actions">
            <el-button @click="showDesigner = true">
              <el-icon><Setting /></el-icon>
              流程设计器
            </el-button>
            <el-button @click="showManager = true">
              <el-icon><Management /></el-icon>
              流程管理
            </el-button>
          </div>
        </div>
      </el-header>
      
      <el-main class="app-main">
        <!-- 欢迎页面内容 -->
        <div class="welcome-section">
          <h1>工作流管理系统</h1>
          <p>欢迎使用基于Vue3和Workflow-Core的工作流管理系统</p>
          
          <div class="feature-cards">
            <el-card class="feature-card">
              <template #header>
                <div class="card-header">
                  <el-icon><Setting /></el-icon>
                  <span>流程设计器</span>
                </div>
              </template>
              <p>拖拽式流程设计，支持会签、加签、驳回等高级功能</p>
              <el-button type="primary" @click="showDesigner = true">打开设计器</el-button>
            </el-card>
            
            <el-card class="feature-card">
              <template #header>
                <div class="card-header">
                  <el-icon><Management /></el-icon>
                  <span>流程管理</span>
                </div>
              </template>
              <p>管理工作流定义、实例和任务</p>
              <el-button type="primary" @click="showManager = true">打开管理器</el-button>
            </el-card>
            
            <el-card class="feature-card">
              <template #header>
                <div class="card-header">
                  <el-icon><Document /></el-icon>
                  <span>API集成</span>
                </div>
              </template>
              <p>完整的RESTful API，支持工作流生命周期管理</p>
              <el-button type="info" @click="testApi">测试API</el-button>
            </el-card>
          </div>
        </div>
        
        <!-- 流程设计器对话框 -->
        <el-dialog 
          v-model="showDesigner" 
          title="流程设计器" 
          width="95%" 
          :before-close="handleDesignerClose"
          class="designer-dialog"
        >
          <WorkflowDesigner 
            v-if="showDesigner"
            @close="showDesigner = false"
          />
        </el-dialog>
        
        <!-- 流程管理对话框 -->
        <el-dialog 
          v-model="showManager" 
          title="流程管理" 
          width="95%" 
          :before-close="handleManagerClose"
          class="manager-dialog"
        >
          <WorkflowManager 
            v-if="showManager"
            @close="showManager = false"
          />
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<style>
.app-root {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  overflow: hidden;
}

.app-container {
  height: 100vh;
}

.app-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.app-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: white;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.header-actions .el-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.header-actions .el-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.app-main {
  padding: 0;
  background: #f5f7fa;
  overflow: auto;
}

/* 欢迎页面样式 */
.welcome-section {
  padding: 40px;
  text-align: center;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: calc(100vh - 60px);
}

.welcome-section h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.welcome-section p {
  font-size: 1.2rem;
  margin-bottom: 3rem;
  opacity: 0.9;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.feature-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1.1rem;
}

.card-header .el-icon {
  font-size: 1.2rem;
  color: #409eff;
}

.feature-card p {
  margin: 1rem 0;
  color: #606266;
  line-height: 1.6;
}

.designer-dialog,
.manager-dialog {
  margin: 0;
}

.designer-dialog :deep(.el-dialog__body),
.manager-dialog :deep(.el-dialog__body) {
  padding: 0;
  height: calc(100vh - 120px);
  overflow: hidden;
}

.designer-dialog :deep(.el-dialog),
.manager-dialog :deep(.el-dialog) {
  margin: 10px;
  height: calc(100vh - 20px);
  max-width: 95vw;
  width: 95vw !important;
}
</style>
